<template>
    <div>
        <Row>
            <div style="float:left;margin:3px"  >
                <Button type="primary" @click="btn_refresh" >刷新</Button>
            </div>
            <div style="float:left;margin:3px"  >
                <Button type="primary" @click="btn_add_task" >添加任务</Button>
            </div>
            <div style="float:left;margin:3px"  >
                <Button type="primary" @click="btn_start_scheduler" >启动调度器</Button>
            </div>
            <div style="float:left;margin:3px"  >
                <Button type="primary" @click="btn_shutdown_scheduler" >停止调度器</Button>
            </div>
        </Row>
        <i-table border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" style="margin: 5px "  @click="btn_edit_task(index)">编辑</Button>
                <!-- <Button type="primary" style="margin: 5px " >启动</Button> -->
                
                <Button type="primary" style="margin: 5px " @click="btn_pause_task(index)">暂停</Button>
                <Button type="primary" style="margin: 5px " @click="btn_resume_task(index)">恢复</Button>
                <Button type="primary" style="margin: 5px " >查看日志</Button>
                <Button type="error" style="margin: 5px "  @click="del_xx(index)">删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 新增 -->
        <Modal v-model="show_add_task_modal" width="800" draggable>
            <p slot="header" style="color:#f60;text-align:center">
                <span>添加任务</span>
            </p>
            <div >
                <Form ref="task" :model="task" :rules="task_rules" label-position="left"  :label-width="100">
                    <Form-Item label="任务名称:"  prop="name">
                        <Input type="text"  v-model="task.name" />
                    </Form-Item> 
                    <Form-Item label="运行周期:"  prop="cron">
                        <Input type="text"  v-model="task.cron"  placeholder="分 时 天 月 星期" />
                    </Form-Item> 
                    <Form-Item label="函数名称:"  prop="job_func">
                        <Input type="text"  v-model="task.job_func" />
                    </Form-Item> 
                    <Form-Item label="参数:"  prop="params">
                        <Input type="text"  v-model="task.params" placeholder="{'a':1,'b':2}" />
                    </Form-Item> 
                    <Form-Item label="管理人员:"  prop="managers">
                        <Input type="text"  v-model="task.managers" />
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_add_task('task')">提交</Button>
            </div>
        </Modal>

        <!-- 编辑 -->
        <Modal v-model="show_edit_task_modal" width="800" draggable>
            <p slot="header" style="color:#f60;text-align:center">
                <span>编辑任务 {{ task_edit.managers }}</span>
            </p>
            <div >
                <Form ref="task" :model="task_edit" :rules="task_rules" label-position="left"  :label-width="100">
                    <Form-Item label="任务名称:"  prop="name">
                        <Input type="text"  v-model="task_edit.name" />
                    </Form-Item> 
                    <Form-Item label="运行周期:"  prop="cron">
                        <Input type="text"  v-model="task_edit.cron"  placeholder="分 时 天 月 星期" />
                    </Form-Item> 
                    <Form-Item label="函数名称:"  prop="job_func">
                        <Input type="text"  v-model="task_edit.job_func" />
                    </Form-Item> 
                    <Form-Item label="参数:"  prop="params">
                        <Input type="text"  v-model="task_edit.params" placeholder="{'a':1,'b':2}" />
                    </Form-Item> 
                    <Form-Item label="管理人员:"  prop="managers">
                        <Input type="text"  v-model="task_edit.managers" />
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_edit_task('task')">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>

import { 
    get_task_list,
    task_add,
    task_update,
    start_scheduler,
    shutdown_scheduler,
    resume_job,
    pause_job,
} from  '@/api'
import { post } from '@/api/http'
import { show_simple_page,colors } from '@/common/util' 
import store from '@/store'

const STATE_STOPPED = 0
const STATE_RUNNING = 1
const STATE_PAUSED = 2

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '序列号',key: 'id'
                },
                {
                    title: '任务Id',key: 'job_id'
                },
                {
                    title: '任务名称',key: 'name'
                },
                {
                    title: '函数名',key: 'job_func'
                },
                {
                    title: 'Cron表达式',key: 'cron'
                },
                {
                    title: '状态',key: 'status',
                    render: (h,params) => {
                        let value = params.row.status
                        if(value == STATE_RUNNING ){
                            return h('span',{
                                style: {
                                    color: colors['green'],
                                }
                            },'运行中')
                        } else if (value == STATE_STOPPED ){
                            return h('span',{
                                style: {
                                    color: colors['red'],
                                }
                            },'停止')
                        }else if (value == STATE_PAUSED ){
                            return h('span',{
                                style: {
                                    color: colors['yellow'],
                                }
                            },'暂停')
                        }else{
                            return h('span',{
                                style: {
                                    color: colors['gray'],
                                }
                            },'未知')
                        }
                    }
                },
                {
                    title: '下次运行时间',key: 'next_run_time'
                },
                {
                    title: '管理人员',key: 'managers'
                },
                {
                    title: '参数',key: 'params'
                },
                {
                    title: '更新时间',key: 'update_time'
                },
                {
                    title: '创建时间',key: 'create_time',
                },
                {
                    title: '操作',slot: 'action',width: 250,align: 'center'
                }
            ],
            // 新增
            show_add_task_modal:false,
            
            task: {
                name: '',
                cron: "*/1 * * * *",
                job_func: '',
                params: '',
                managers: '',
            },
            task_rules: {
                name:[
                    {required: true,message:"请输入任务名称",trigger: 'blur'},
                ],
                cron:[
                    {required: true,message:"请输入运行周期",trigger: 'blur'},
                ],
                job_func:[
                    {required: true,message:"请输入函数名称",trigger: 'blur'},
                ],
            },
            // 编辑
            show_edit_task_modal:false,
            
            task_edit: {
                name: null,
                cron: null,
                job_func: null,
                params: null,
                managers: null,
            },
            // 分页
            total_list: [],
            show_list: [],
            total: 0,
            pageSize: 50,
            // 
        }

    },
    methods: {
        del_xx(index){
            console.log(index)
        },
        btn_pause_task(index){
            let job_id = this.show_list[index].job_id
            let data = {
                "job_id":job_id
            }
            post(pause_job,data).then( (response) => {
                if(response.status==200) {
                    this.$Message.success('暂停成功')
                    this.refresh()
                }
            }).catch(error=>{
                alert(error)
            })  
        },
        btn_resume_task(index){
            let job_id = this.show_list[index].job_id
            let data = {
                "job_id":job_id
            }
            post(resume_job,data).then( (response) => {
                if(response.status==200) {
                    this.$Message.success('恢复成功')
                    this.refresh()
                }
            }).catch(error=>{
                alert(error)
            })  
        },
        btn_shutdown_scheduler(){
            post(shutdown_scheduler).then( (response) => {
                if(response.status==200) {
                    this.$Message.success('停止成功')
                    this.refresh()
                }
            }).catch(error=>{
                alert(error)
            })  
        },
        btn_start_scheduler(){
            post(start_scheduler).then( (response) => {
                if(response.status==200) {
                    this.$Message.success('启动成功')
                    this.refresh()
                }
            }).catch(error=>{
                alert(error)
            })  
        },
        submit_edit_task(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) validate = true
            })
            if(!validate) return

            // 我靠 这里是浅拷贝
            let data = JSON.parse(JSON.stringify(this.task_edit))
            if(data.managers){
                data.managers = data.managers.split(",").map(Number)
            }
            
            post(task_update,data).then( (response) => {
                if(response.status==200) {
                    this.$Message.success('更新成功')
                    this.show_edit_task_modal = false
                    this.refresh()
                }
            }).catch(error=>{
                alert(error)
            })   
        },
        // 编辑
        btn_edit_task(index){
            let task =  JSON.parse(JSON.stringify(this.show_list[index]))
            this.task_edit = task
            setTimeout(() =>{
                this.show_edit_task_modal=true
            },200); 
        },
        // 提交任务
        submit_add_task(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) validate = true
            })
            if(!validate) return

            let data = JSON.parse(JSON.stringify(this.task))
            if(data.managers){
                data.managers = data.managers.split(",").map(Number)
            }
            
            post(task_add,data).then( (response) => {
                if(response.status==200) {
                    this.$Message.success('添加成功')
                    this.show_add_task_modal = false
                    this.refresh()
                }
            }).catch(error=>{
                alert(error)
            })    
        },
        // 添加任务
        btn_add_task(){
            this.show_add_task_modal = true
        },
        btn_refresh(){
            this.refresh()
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            post(get_task_list,undefined).then(response =>{
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>